<template>
  <AppHeader title="单项选择" :banAnimate="true" backgroundColor="#ffffff">
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-back-black.png"
        width="9"
        height="18"
      />
    </template>
  </AppHeader>
  <div class="container">
    <template v-for="(item,inx) in list" :key="item.sid">
      <div class="top" v-html="item.module_type_name" v-if="item.module_type_name">
      </div>
      <div class="options-list" >
        <template v-if="item.children.length > 1">
          <template v-for="(i,index) in item.children" :key="i.sid"  v-if="item.children.length">

            <div class="options-list" v-if="i.children.length">
              <span v-for="k in i.children.length" :key="k" :class="i.children[k-1].answer.sType ? 'circle-blue': ''" @click="viewGoto(item,index,k)">{{k}}</span>
            </div>
            <div class="options-list" v-else  style="display: inline-block;padding: 0;">
              <span  :key="index" :class="item.children[index].answer.sType ? 'circle-blue': ''" @click="viewGoto(item,inx,index+1)">{{index +1}}</span>
            </div>
          </template>
        </template>
        <template v-else>
          <template v-for="child in item.children" :key="child.sid">
            <template v-if="child.children.length">
              <span v-for="i in child.children.length" :key="i" :class="child.children[i-1].answer.sType ? 'circle-blue' : ''" @click="viewGoto(child,inx,i)">{{i}}</span>
            </template>
          </template>
        </template>
      </div>
    </template>
    <div class="btn" @click="submit">
      <van-button type="primary" block round color="linear-gradient( 270deg, #29F19C 0%, #02A1F9 100%)">交作业</van-button>
    </div>
    <van-dialog v-model:show="show" title="提示" show-cancel-button @confirm="confirm">
        <div style="width: 80%;margin:20px auto;">您还有{{NotDone}}道题目未完成，确定交卷吗?</div>
    </van-dialog>
  </div>
</template>

<script setup>
import AppHeader from "@/components/AppHeader.vue";
import { useRouter } from "vue-router";
import {onMounted ,ref} from 'vue'
import { showDialog } from 'vant';
import { saveExercise } from "@/api/writtenTest";
const router = useRouter();
const list = ref([])
const NotDone = ref(0)
const onClickLeft = () => {
  router.back();
};
const onClickRight = () => { 
  router.push('/writtenTest/singleTest')
}
var subMitObj = JSON.parse(sessionStorage.getItem('resource'))
const show = ref(false)
const submit = () => { 
  NotDone.value = 0
  list.value.forEach(item=>{
    if(item.children.length){
      item.children.forEach(i=>{
        if(i.answer.sorce === -1){
          NotDone.value ++ 
        }
      })
    }
  })
  if(NotDone.value > 0){
    show.value=true
  }else{
    confirm()
  }
}
const confirm = ()=>{
  var answer_score_json = []
  list.value.forEach(item=>{
    if(item.children.length){
      item.children.forEach(i=>{
        answer_score_json.push({
          score:i.answer.sorce,
          color:(i.answer.isAnswer && i.answer.sorce) ? 'green' :  (!i.answer.isAnswer && i.answer.sorce === 0) ? 'red' : 'yellow'
        })
      })
    }
  })
  var params = {
    source_id:subMitObj.id ,
    question_type:0,
    question_source_type:4,
    use_time:sessionStorage.getItem('time'),
    answer_score_json:JSON.stringify(answer_score_json),
    total_score:subMitObj.ref_score ? subMitObj.ref_score : subMitObj.total_score,
    json:JSON.stringify(subMitObj)
  }
  saveExercise(params).then(res=>{
    sessionStorage.setItem('successObj',JSON.stringify(res.data))
    router.push('/writtenTest/singleScore')
  })
}
onMounted(()=>{
  list.value = JSON.parse(sessionStorage.getItem('resource')).parts
})
const viewGoto = (item,index,i) =>{
//   qtype = 1 选择题
// qtype = 3 填空题
// qtype = 5 / 4 一个阅读理解有多个选择题
// qtype = 6 html标签，填空题
  var obj =item.children[index].qtype
  var sid = item.children[index].sid
  if(obj===1){
    router.push({
      path: "/writtenTest/singleTest",
      query: { sid ,num:i},
    });
  }else if(obj === 5 || obj === 4){//阅读理解
    router.push({
      path: "/writtenTest/readTest",
      query: { sid,num:i },
    });
  }else if(obj===6){
    router.push({
      path: "/writtenTest/clozeTest",
      query: { sid ,num:i},
    });
  }else if(obj === 3) {  //选择
    router.push({
      path: "/writtenTest/singleRightTest",
      query: { sid,num:i },
    });
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: #ffffff;
  padding-top: 44px;
  overflow-y: auto;
 .top{
  font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
color: #333333;
line-height: 22px;
text-align: left;
font-style: normal;
padding: 15px 10px;
 }
.options-list{
  padding: 15px 10px;
  span{
margin: 7.5px;
width: 48px;
height: 48px;
border: 1px solid #E5E5E5;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #333333;
line-height: 46px;
text-align: center;
font-style: normal;
display: inline-block;
    border-radius: 50%;
&.circle-blue{
  border: 1px solid #0CB76C;
  color: #0CB76C;
}

&.circle-red{
  border: 1px solid #FA192C;
  color: #FA192C;
}
  }
}
 .btn{ padding: 30px 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>
